<template>
  <el-dialog
    :model-value="KpiDialogVisible"
    :title="title"
    align-center
    draggable
    width="40%"
    style="border-radius: 10px; padding: 5px 10px">
    <el-form
      ref="formRef"
      :model="form"
      label-width="120px"
      class="demo-dynamic"
      size="large"
      style="margin: 20px"
      :rules="rules"
    >
      <el-form-item label="员工">
        <el-select
          filterable
          remote
          style="width: 250px"
          v-model="form.empId"
          placeholder="请选择员工"
          @change="matchPosition($event, index)"
        >
          <el-option
            v-for="(item, index) in EmpList"
            :label="item.name"
            :key="index"
            :value="item.id"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="岗位">
        <el-select
        style="width: 250px"
          v-model="form.positionId"
          placeholder="请选择员工岗位"
          @change="matchPiece($event, index)"
        >
          <el-option
            v-for="(item, index) in PositionList"
            :label="item.position"
            :key="index"
            :value="item.positionId"
          >
            {{ item.position }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="条目名称">
        <el-select
        style="width: 250px"
          v-model="form.pieceId"
          placeholder="请选择计件条目"
          @change="match($event, index)"
        >
          <el-option
            v-for="(item, index) in PieceRuleList"
            :label="item.name"
            :key="index"
            :value="item.pieceId"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-for="(domain, index) in dynamicValidateForm"
        :key="domain.key"
        :label="'序号' + (index + 1)"
        :prop="'domains.' + index + '.value'"
      >
          <el-input
            v-model="domain.workOrder"
            style="width: 250px"
            placeholder="请填写数量"
          />
          <el-input
            v-model="domain.quality"
            style="width: 250px;margin-top:10px;"
            placeholder="请填写质量(100%)"
          />%
          <el-button
          v-if="props.type=='add'"
            @click.prevent="removeDomain(index)"
            type="primary"
            icon="Minus"
            circle
            style="margin-left: 20px"
          />
        <el-button
        v-if="props.type=='add'&& index === dynamicValidateForm.length - 1"
          @click="addDomain(index)"
          type="primary"
          icon="Plus"
          circle
        />
      </el-form-item>
      <el-form-item>
        <el-button style="width: 150px" @click="onClose">取消</el-button>
        <el-button style="width: 150px" type="primary" @click="submitForm"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { ref, onBeforeMount, reactive, defineProps, defineEmits,watch} from "vue";
import { getEmpList } from "@/api/employee";
import {getEmpPositionList} from "@/api/position"
import {getOneRuleList} from '@/api/piece'
import {addOnePiece,updateOnePiece} from '@/api/empPiece'
import { ElMessage } from "element-plus";

const props = defineProps({
  update: {
    type: Function,
    default: () => {},
  },
  close: {
    type: Function,
    default: () => {},
  },
  selectContent: {
    type: Object,
    required: true,
  },
  type: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
});
watch(props, (newValue, oldValue) => {
  if (newValue.selectContent != undefined) {
    form.empId=newValue.selectContent.empId;
    form.positionId=newValue.selectContent.positionId;
    form.pieceId=newValue.selectContent.pieceId;
    if(newValue.type=='add'){
      dynamicValidateForm.splice(0,dynamicValidateForm.length);
      dynamicValidateForm[0]={
        empId: form.empId,
        pieceId: form.pieceId,
        workOrder: null,
        quality:null
      }
    }
    if(newValue.type=='edit'){
      form.id=newValue.selectContent.empPieceId;

      EmpList.value=[]
      getEmpList().then((data) => {
        for (let i of data.data) {
          i.id=String(i.id)
          EmpList.value.push(i);
        }
      });

      PositionList.value=[]
      let positionId=newValue.selectContent.positionId
      getOneRuleList({ positionId }).then((data) => {
        PieceRuleList.value = data.data;
        for (let i of data.data) {
          i.id=String(i.id)
          PositionList.value.push(i);
        }
      });
      dynamicValidateForm[0]={
        id:newValue.selectContent.empPieceId,
        empId: form.empId,
        pieceId: form.pieceId,
        workOrder:newValue.selectContent.workOrder,
        quality:newValue.selectContent.quality
      }
    }
  }
});

const form=reactive({
    id:'',
    empId:'',
    positionId:'',
    pieceId:""
})

const EmpList = ref();
onBeforeMount(() => {
  getEmpList().then((data) => {
    EmpList.value = data.data;
  });
});

const PositionList=ref();
const matchPosition=(empId,index)=>{
    form.positionId=''
    form.pieceId=''
    getEmpPositionList({empId}).then((data)=>{
        PositionList.value=data.data;
    })
}

const PieceRuleList = ref();
const matchPiece = (positionId, index) => {
  form.pieceId=''
  getOneRuleList({ positionId}).then((data) => {
    PieceRuleList.value = data.data;
  });
};

const dynamicValidateForm = reactive([]);
const match = (pieceId, index) => {
  dynamicValidateForm[0]=
    {
      key: 1,
      empId: form.empId,
      pieceId: pieceId,
      workOrder: null,
      quality:null
    }
};

const removeDomain = (index) => {
  dynamicValidateForm.splice(index, 1);
};

const addDomain = (index) => {
  console.log(index);
  dynamicValidateForm[index+1]={
    key: Date.now(),
    empId: form.empId,
    pieceId: form.pieceId,
    workOrder: null,
    quality:null
  }
};

const submitForm = () => {
  if(props.type=='add'){
    addOnePiece(dynamicValidateForm).then((data) => {
    if (data.code == 200) {
        ElMessage({
          message: "提交成功",
          type: "success",
        });
        props.update();
        props.close()
      }
    });
  }
  else if(props.type=='edit'){
    updateOnePiece(dynamicValidateForm[0]).then(data=>{
      if (data.code == 200) {
        ElMessage({
          message: "编辑成功",
          type: "success",
        });
        props.update();
        props.close()
      }
    })
  }
  
};

const onClose=()=>{
  props.close()
}
</script>
<style lang="scss" scoped >
::v-deep .el-form-item__label:before {
  content: "* ";
  color: red;
}
.ins {
  ::v-deep .el-form-item__label:before {
    content: " ";
  }
}
</style>
